<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="main_layout::html_header(~{::link}, ~{::style})">
	<link rel="stylesheet" th:href="@{/lib/DataTables/1.10.15/datatables.min.css}" />
	<link rel="stylesheet" th:href="@{/lib/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css}" />
	<style type="text/css">
	.info-box-content {
		margin-left: 10px;
	}
	.timeline-item {
		background-color: #ecf0f5 !important;
	}
	</style>
</head>
 
<body class="hold-transition skin-blue fixed">
<div class="wrapper">

<header class="main-header" th:replace="main_layout::header">
</header>

<aside class="main-sidebar">
	<section class="sidebar" th:replace="main_layout::menu">
	</section>
</aside>

<div class="content-wrapper">
<section class="content-header">
	<h1>首页 <small></small></h1>
</section>
	
<section class="content">

<div class="row">
	<div class="col-lg-3 col-xs-4">
		<div class="small-box bg-aqua">
			<div class="inner">
				<h3 th:text="${htzs}"></h3>
				<p>录入合同总数</p>
			</div>
			<div class="icon">
				<img class="ico_img" th:src="@{img/lu_icon.png}">
			</div>
			<a href="javascript:;" onclick="cont_list()" class="small-box-footer">查看明细 <i class="fa fa-arrow-circle-right"></i></a>
		</div>
	</div>
	<div class="col-lg-2 col-xs-4">
		<div class="small-box bg-light-blue">
			<div class="inner">
				<h3 th:text="${ygz}"></h3>
				<p>已盖章合同总数</p>
			</div>
			<!-- 
			<div class="icon">
				<img class="ico_img" th:src="@{img/sen_icon.png}">
			</div>
			 -->
			<a href="javascript:;" onclick="cont_list(7)" class="small-box-footer">查看明细 <i class="fa fa-arrow-circle-right"></i></a>
		</div>
	</div>
	<div class="col-lg-2 col-xs-4">
		<div class="small-box bg-light-blue">
			<div class="inner">
				<h3 th:text="${wgz}"></h3>
				<p>未盖章合同总数</p>
			</div>
			<!-- 
			<div class="icon">
				<img class="ico_img" th:src="@{img/sen_icon.png}">
			</div>
			 -->
			<a href="javascript:;" onclick="cont_list(6)" class="small-box-footer">查看明细 <i class="fa fa-arrow-circle-right"></i></a>
		</div>
	</div>
	<div class="col-lg-2 col-xs-4">
		<div class="small-box bg-purple">
			<div class="inner">
				<h3 th:text="${zfgz}"></h3>
				<p>作废盖章合同总数</p>
			</div>
			<!-- 
			<div class="icon">
				<img class="ico_img" th:src="@{img/wei_icon.png}">
			</div>
			 -->
			<a href="javascript:;" onclick="cont_list(-2)" class="small-box-footer">查看明细 <i class="fa fa-arrow-circle-right"></i></a>
		</div>
	</div>
	<div class="col-lg-3 col-xs-4">
		<div class="small-box bg-green">
			<div class="inner">
				<h3 th:text="${ywc}"></h3>
				<p>已完成合同总数</p>
			</div>
			<div class="icon">
				<img class="ico_img" th:src="@{img/finish_icon.png}">
			</div>
			<a href="javascript:;" onclick="cont_list(1)" class="small-box-footer">查看明细 <i class="fa fa-arrow-circle-right"></i></a>
		</div>
	</div>
	
	
</div>

<div class="box box-default">
<div class="box-header">
	<form class="form-inline" id="search_form">
		<div class="form-group">
			<label for="name">合同编号：</label>
			<input type="text" class="form-control" name="no" style="width: 150px" />
		</div>
		<div class="form-group">
			<label for="jfWtr">委托人：</label>
			<input type="text" class="form-control" name="jfWtr" style="width: 100px" />
		</div>
		<div class="form-group">
			<label for="jfLxr">甲方联系人：</label>
			<input type="text" class="form-control" name="jfLxr" style="width: 150px" />
		</div>
		<div class="form-group">
			<label for="organizationName">状态：</label>
			<select name="status" class="form-control" id="status">
				<option value="">全部</option>
				<option value="7">已盖章中合同</option>
				<option value="6">未盖章合同</option>
				<option value="-2">作废盖章合同</option>
				<option value="1">已完成合同</option>
			</select>
		</div>
		<div class="form-group">
			<label for="organizationName">公司：</label>
			<select name="company" class="form-control" id="company">
				<option value="">全部</option>
				<option value="HB">上海宏邦</option>
				<option value="HJ">上海宏京</option>
				<option value="HL">上海宏麟</option>
				<option value="HY">上海宏熠</option>
				<option value="B">苏州宏邦宏晔</option>
			</select>
		</div>
		<div class="form-group">
			<label for="organizationName">业务名称：</label>
			<select name="ywlx" class="form-control" id="ywlx">
				<option value="">全部</option>
				<option th:each="ywlx : ${ywlxs}" th:value="${ywlx.id}" th:text="${ywlx.name}"></option>
			</select>
		</div>
		
		<div class="form-group">
			<label for="organizationName">录入人：</label>
			<input type="text" class="form-control" name="user" style="width: 150px" />
		</div>
		<div class="form-group">
			<label for="organizationName">录入时间：</label>
			<input type="text" class="form-control" name="start_date" id="start_date" style="width: 150px" /> ~
			<input type="text" class="form-control" name="end_date" id="end_date" style="width: 150px" />
		</div>
		<div class="form-group">  
			<button type="button" class="btn btn-default" onclick="$('#search_form')[0].reset();">重置</button>
			<button type="button" class="btn btn-primary" onclick="table.ajax.reload();">查询</button>
		</div>
	</form> 
</div>

<div class="box-body">

<table id="contract_table" class="table table-hover table-bordered">
    <thead>
    <tr>
    	<th>ID</th>
    	<th>合同编号</th>
    	<th>公司</th>
        <th>地区</th>
        <th>业务名称</th>
        <th>一次分期</th>
        <th>宏金保</th>
        <th>委托人</th>
        <th>甲方联系人</th>
        <th>总金额</th>
        <th>当前进度</th>
        <th>录入人</th>
        <th>录入时间</th>
    </tr>
    </thead>
</table>

</div>
</div>

</section>
</div>
  
<footer class="main-footer" th:replace="main_layout::footer">
</footer>


<aside class="control-sidebar control-sidebar-light">
    
</aside>

<div class="control-sidebar-bg" ></div>

</div>
<div th:replace="fragment/audit_template::process">
</div>

<script th:src="@{/pageoffice.js}" id="po_js_main"></script>
<script th:src="@{/lib/DataTables/1.10.15/datatables.min.js}"></script>
<script th:src="@{/lib/DataTables/datatables.config.js}"></script>
<script th:src="@{/lib/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js}"></script>
<script th:src="@{/lib/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.zh-CN.min.js}"></script>
<script th:src="@{/lib/moment/2.18.1/moment.min.js}"></script>
<script>
var table;
function cont_list(num) {
	if(num == undefined) {
		$("#status").val("");
	} else {
		$("#status").val(num);
	}
	table.ajax.reload();
}
function cont_view(id) {
	POBrowser.openWindowModeless("[[@{/contract/view/}]]" + id, 'width=1200px;height=800px;');
}

$(function(){
	$('#start_date').datepicker({
		format:"yyyy-mm-dd",
		autoclose: true,
		language: "zh-CN"
	});
	
	$('#end_date').datepicker({
		format:"yyyy-mm-dd",
		autoclose: true,
		language: "zh-CN"
	});
	table = $('#contract_table').DataTable({
		serverSide: true,
		select: false,
		order: [12, 'desc'],
        ajax: {
            url: "[[@{/contract/list}]]",
            type: 'POST',
            data: function(d){
				d.query = JSON.stringify($("#search_form").serializeArray());
			}
        },
        columnDefs: [
        	{targets:0, visible:false},
        	{targets:1, width: "140px", render:function(data, type, full, meta ) {
        		return 	"<a href = 'javascript:;' onclick='cont_view(" + full[0] + ")'>" + data + "</a>";
        	}},
        	{targets:2, orderable: false, width: "40px"},
        	{targets:3, orderable: false, width: "40px", render: function(data, type, full, meta ) {
        		var area = '';
        		switch(data) {
        		case 'A':
        			area = '上海';
        			break;
        		case 'B':
        			area = '苏州';
        			break;
        		case 'C':
        			area = '成都';
        			break;
        		}
            	return	area;
            }},
        	{targets:5, orderable: false, width: "60px", render: function(data, type, full, meta ) {
            	return	data == 'O' ? "一次" : "分期";
            }},
        	{targets:6, orderable: false, width: "50px", render: function(data, type, full, meta ) {
            	return	data ? "是" : "否";
            			
            }},
        	{targets:9,  width: "50px", render: function(data, type, full, meta ) {
            	return	data == 0 ? "" : data;
            			
            }},
        	{targets:10,  orderable: false, render: function(data, type, full, meta ) {
        		return 	"<a style='white-space:pre' href = 'javascript:;' onclick='show_process(" + full[0] + ")'>" + data + "</a>";		
            }},
        	{targets:11,  width: "50px"},
        	
            {targets: -1,  width: "120px",  className: "align_right", render: function (data, type, full, meta ) {
				return data ? moment(data).format("YYYY-MM-DD HH:mm:ss") : '';
			}}
        ]
	
    });
});
</script>
</body>
</html>
